<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDom" ref="btn">点我输出上方dom元素</button>
        <!-- ref放在组件上，可以拿到组件实例对象 -->
        <SchoolName ref="sch"/>  
    </div>

</template>

<script>
import SchoolName from './components/School.vue'
export default {
    name:'App',
    components:{SchoolName},
    data(){
        return{
            msg:"欢迎学习Vue!"
        }
    },
    methods:{
        showDom(){
            console.log(this.$refs.title)//真实DOM元素
            console.log(this.$refs.btn)//真实DOM元素
            console.log(this.$refs.sch)//School组件的实例对象（vc）
        }
    }
}
</script>

<style>

</style>